<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    // onclick      鼠标单击 (鼠标左键  按下并松开)
    // ondblclick   鼠标双击 (鼠标左键  连续点击两次)

    // onmousedown  鼠标按下 (鼠标 左 中 右 侧键 均可触发)
    // onmouseup    鼠标抬起(松开)  (鼠标 左 中 右 侧键 均可触发)
 


    var box = document.getElementsByClassName("box")[0];

    // box.onclick = function(){
    //     console.log("点击了box");
    // }

    // box.ondblclick = function(){
    //     console.log("老铁双击666");
    // }

    // box.onmousedown = function(e){// event evt e 形参 => 事件对象 => 事件触发数时的相关信息(鼠标的按键 )
    //     console.log("鼠标在box按下",e.button);  // 左键:0  中:1  右键:2  侧键:3 4
    // }

    // box.onmouseup = function(e){
    //     console.log("鼠标在box松开",e.button);
    // }

    // box.onmousemove = function(e){
    //     console.log("鼠标在box中移动");
    // }

    box.onmouseover = function(){
        console.log("鼠标划入box");
    }

    box.onmouseout = function(){
        console.log("鼠标划出box");
    }







</script>
</html>